<template>
  <CommonForm :model="searchForm" :form-json="formJson" :label-width="120" />
</template>
<script lang="ts" setup name="App">
import CommonForm from './components/CommonForm.vue'
import {getCascaderOptionApi, getSelectOptionApi} from "./api/mock-api";
import {ref} from "vue";
const formJson = ref<FormItem[]>([{
  type:'text',
  field:'name',
  label:'姓名',
},{
  type:'password',
  label:'密码',
  field:'password',
  placeholder:'自定义placeholder'
},{
  type:'textarea',
  field:'desc',
  label:'描述',
  showWordLimit:true,
},{
  type:'number',
  field:'num',
  label:'输入框'
},{
  type:'select',
  field:'selectType',
  label:'选择框(单选)',
  optionsFrom:'dict' // default:默认取options dict:从字典中取值 backendApi: 后台返回请求url取值 frontendApi: 前台请求api取值
},{
  type:'select',
  field:'selectType1',
  label:'选择 前端提供',
  props:{
    label:'name',
    value:'id'
  },
  optionsFrom:'frontendApi',
  optionsApi: getSelectOptionApi
},{
  type:'select',
  field:'selectType2',
  label:'选择 后端提供',
  props:{
    label:'city',
    value:'id'
  },
  optionsFrom:'backendApi',
  optionsApi: '/api/select-option',
  optionsApiType:'get'
},{
  type:'date',
  field:'date',
  label:'日期选择器',
  disabledDateType: 'before' // before after
},{
  type:'datetime',
  field:'datetime',
  label:'日期时间选择器',
  disabledDateType: 'after'
},{
  type:'daterange',
  field:'daterange',
  label:'日期范围选择器',
},{
  type:'datetimerange',
  field:'datetimerange',
  label:'日期时间范围选择器',
},{
  type:'cascader',
  field:'cascader',
  label:'级联选择器',
  props:{
    label:'name',
    value:'id',
    checkStrictly:true,
  },
  optionsFrom:'frontendApi',
  optionsApi: getCascaderOptionApi
},{
  type:'treeSelect',
  field:'treeSelect',
  label:'树形选择',
  props:{
    label:'email',
    value:'id',
  },
  optionsFrom:'frontendApi',
  optionsApi: getCascaderOptionApi
}])
const searchForm = ref<SearchFormType>({
  page:1,
  limit:10,
})
</script>

